<template>
    <div class="player">
        <div id="aplayer"></div>
    </div>
</template>
<script setup>
   import { onMounted } from "vue"
   import {useStore} from "vuex"
   const store = useStore();
   import 'aplayer/dist/APlayer.min.css';
   import APlayer from 'aplayer';
   onMounted(() => {
       console.log(store.state.musicUrl)
       const ap = new APlayer({
           container: document.getElementById('aplayer'),
           audio: [{
               name: "",
               artist: '',
               url: store.state.musicUrl,
               theme: '#FADFA3'
           }]
       });
   })
</script>

<style scoped>
    .player{
        width: 100%;
        height: 70rem;
        position: fixed;
        background-color: skyblue;
        bottom: 50rem;
    }
</style>